<template>
  <div>
    <tdt-map
      style="width: 1000px; height: 800px"
      :center="state.center"
      :zoom="state.zoom"
      :loadConfig="loadConfig"
      @init="mapInit"
    >
      <tdt-marker-clusterer
        :markers="markers"
        :styles="styles"
      ></tdt-marker-clusterer>
      <tdt-marker
        :position="state.center"
        :draggable="false"
        icon="https://soullyoko.github.io/vue-tianditu/marker_red.png"
      ></tdt-marker>
      <tdt-infowindow
        v-model:target="target"
        :content="content"
      ></tdt-infowindow>
    </tdt-map>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import 'vue-tianditu/lib/style.css'
const loadConfig = { v: '4.0', tk: '8362ba89b7bfb71c70cac2ef0390132a' }
const target = ref(null)
const content = ref('')
const styles = ref([
  {
    url: 'https://api.tianditu.gov.cn/img/map/markers/b1.png',
    size: [32, 32],
    offset: [-16, -32], // 居中偏移
    textColor: '#FFFFFF',
    textSize: 12,
    range: [0, 50],
  },
  {
    url: 'https://api.tianditu.gov.cn/img/map/markers/b2.png',
    size: [48, 48],
    offset: [-24, -48],
    textColor: '#FF0000',
    textSize: 14,
    range: [50, 200],
  },
  {
    url: 'https://api.tianditu.gov.cn/img/map/markers/b3.png',
    size: [64, 64],
    offset: [-32, -64],
    textColor: '#000000',
    textSize: 16,
    range: [200, 500],
  },
])
const map = ref(null) // 地图组件
// 生成北京周边坐标（示例）
const markers = ref(
  Array.from({ length: 500 }, (_, i) => ({
    position: [116.3 + Math.random() * 0.5, 39.8 + Math.random() * 0.5],
    extData: `cluster-${i}`,
  })),
)
// 地图配置
const state = reactive({
  center: [116.404, 39.915], // 中心点
  zoom: 16, // 缩放比例
})
</script>
